<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人资料-英雄联盟官方网站</title>
		<link rel="stylesheet" type="text/css" href="./public/bootstrap/dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="./public/main/css/personal.css"/>
        <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style-type: none;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .headerz {
            width: 100%;
            /* height: 90px; */
            background-color: #090909;
        }

        .head_inner {
            width: 1240px;
            height: 90px;
            margin: 0px auto;
        }

        .logo {
            width: 190px;
            height: 100px;
            background-image: url(./public/img/spr-v2.png);
            background-position: 0px -30px;
            margin-top: 5px;
            float: left;
            position: relative;
            z-index: 999;
        }

        .main_nav_wrap {
            float: left;
            /* margin-left: 200px; */
            width: 600px;
            height: 90px;
        }

        .main_nav_wrap ul li {
            width: 120px;
            height: 90px;
            float: left;
        }

        .main_nav_wrap ul li a {
            display: block;
            width: 100%;
            padding-top: 25px;
            font-size: 18px;
            text-align: center;
            color: #fafafa;
        }

        .main_nav_wrap ul li a span {
            display: block;
            font-size: 10px;
            color: #838383;
        }

        .sub_nav {
            visibility: hidden;
            width: 100%;
            height: 220px;
            background-color: rgba(0, 0, 0, 0.7);
            position: absolute;
            padding: 20px 0;
            z-index: 1;
            top: 90px;
            left: 0px;
        }

        .sub_nav_inner {
            width: 1040px;
            height: 100%;
            margin: 0px auto;
            padding-left: 200px;
        }

        .sub_nav_inner ul {
            width: 120px;
            float: left;
            text-align: center;
        }

        .sub_nav_inner ul li {
            height: 28px;
            line-height: 28px;
            color: #e1e1e1;
            font-size: 14px;
            cursor: pointer;
        }

        .hot,
        .new {
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image: url(./public/img/spr-v2.png);
            vertical-align: middle;
        }

        .hot {
            background-position: -107px 0px;
        }

        .new {
            background-position: -129px 0px;
        }

        .head_right {
            width: 440px;
            height: 90px;
            float: right;
        }

        .head_right .head_search,
        .head_right .head_phone {
            display: inline-block;
            width: 40px;
            margin-left: 5px;
            height: 90px;
            text-align: center;
        }

        .head_right .head_search i,
        .head_right .head_phone i {
            display: inline-block;
            width: 27px;
            height: 27px;
            margin-top: 25px;
            background-image: url(./public/img/spr-v2.png);
            cursor: pointer;
        }

        .head_right .head_search i {
            background-position: -8px 0px;
        }

        .head_right .head_phone i {
            background-position: -45px 0px;
        }

        .head_search_main {
            position: absolute;
            width: 440px;
            height: 90px;
            top: 0px;
            background-color: #0b0b0b;
            z-index: 2;
            display: none;
            opacity: 0;
            transition: all 0.5s;
        }

        .head_search_inner {
            position: absolute;
            width: 440px;
            height: 36px;
            background-color: #fff;
            margin-top: 27px;
        }

        .search_inner_icon {
            float: left;
            width: 30px;
            height: 30px;
            margin: 3px 4px 0px;
            background-image: url(./public/img/spr-v2.png);
            background-position: -662px -136px;
        }

        .input_search_box {
            float: left;
            border: none;
            width: 368px;
            height: 20px;
            margin-top: 8px;
            font-size: 16px;
            color: #545454;
            line-height: 20px;
        }

        .close_inner_icon {
            float: left;
            width: 28px;
            height: 36px;
            margin-right: 5px;
            background-image: url(./public/img/spr-v2.png);
            background-position: -664px -175px;
        }

        .head_search_quick {
            position: absolute;
            width: 420px;
            top: 70px;
            background-color: #fff;
            padding: 15px 10px;
        }

        .head_search_quick h5 {
            color: #a4a4a4;
            font-size: 12px;
            line-height: 30px;
            height: 30px;
            padding-left: 30px;
            display: block;
        }

        .head_search_quick a {
            width: 370px;
            height: 30px;
            padding-left: 50px;
            line-height: 30px;
            color: #696969;
            display: block;
            font-size: 14px;
        }

        .head_user_info {
            display: inline-block;
            width: 340px;
            height: 100%;
            float: right;
        }

        .head_user_info .head_user_side {
            float: left;
            width: 100px;
            height: 90px;
        }

        .head_user_info .head_user_side span {
            display: inline-block;
            width: 74px;
            height: 74px;
            margin-top: 8px;
            margin-left: 13px;
            background-image: url(./public/img/spr-v2.png);
            background-position: 0px -169px;
            position: relative;
            z-index: 1;
        }

        .head_user_side img {
            position: absolute;
            top: 12px;
            margin-left: -70px;
            border-radius: 50%;
        }

        .head_user_main {
            width: 240px;
            height: 50px;
            padding-top: 18px;
            margin-left: 100px;
        }

        .head_user_unlogin {
            width: 100%;
            height: 19px;
            padding: 5px 0px;
            color: #fff;
        }

        .head_user_unlogin em {
            text-decoration: underline;
            color: #dfb257;
            margin: 0px 3px;
            font-style: normal;
        }

        .head_user_tips {
            width: 100%;
            height: 19px;
            padding: 5px 0px;
            color: #999;
            font-size: 12px;
        }

        .head_user_drop {
            display: none;
            position: absolute;
            width: 340px;
            height: 100px;
            margin-left: 100px;
            padding-top: 20px;
            background-color: rgba(27, 27, 27, 0.9);
        }

        .head_user_drop_tips {
            width: 290px;
            height: 38px;
            padding: 10px 30px 30px;
            font-size: 14px;
            color: #868686;
        }

        .head-link_personal {
            background-color: #161413;
            width: 340px;
            height: 36px;
            font-size: 12px;
            text-align: center;
            color: #161413;
        }

        .rgba9 {
            background-color: rgba(27, 27, 27, 0.9);
        }

        .banner {
           width: 100%;
		    height: 370px;
		    background: url(http://ossweb-img.qq.com/images/lol/v2/banner/pic-back-v14.jpg) no-repeat center 0px;
		    transition: all 0.8s ease;
		    border-bottom: 2px solid #8c6c2d;
        }

        .banner_connect {
            width: 1240px;
            margin: 0px auto;
            height: 100%;
            position: relative;
        }

        .game_version {
            position: absolute;
            bottom: 30px;
            right: 0px;
            font-size: 14px;
            color: #888787;
        }

        .game_version em {
            font-style: normal;
            margin-right: 10px;
            color: #f5d185;
        }

        .game_version span {
            display: inline-block;
            height: 22px;
            padding: 0px 15px;
            line-height: 22px;
            font-size: 12px;
            color: #f5d185;
            border: 2px solid #f5d185;
            background-color: rgba(0, 0, 0, 0.65);
            text-align: center;
        }

        .content {
            width: 1240px;
            margin: 0 auto;
            padding-top: 40px;
        }
		.icon {
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }
        .house {
		    width: 16px;
		    height: 14px;
		    background: url(./public/img/page.png) -830px -0px;
    		}
       .top {
            padding: 30px 0px;
            font-size: 16px;
        }

        .top a {
            text-decoration: none;
            border-bottom: 1px dotted #333333;
            color: #333333;
        }

        .lg {
            width: 8px;
            height: 9px;
            background: url('./public/img/page.png') -830px -17px;
        }

		.footer {
			margin-top: 100px;
            width: 100%;
            height: 155px;
            padding: 30px 0px;
            background-color: red;
            background: url(http://ossweb-img.qq.com/images/lol/v2/bg-footer.jpg) no-repeat center top;
        }

        .footer_content {
            padding-left: 380px;
            width: 860px;
            color: #A5A5A5;
            font-size: 11px;
            margin: 0 auto;
        }

        .footer_content ul {
            float: right;
        }

        .footer_content ul li {
            height: 19px;
            line-height: 19px;
        }

        .footer_content ul li:nth-of-type(1),
        .footer_content ul li:nth-of-type(2) {
            color: #568193;
        }

        .footer_content ul li:nth-of-type(3),
        .footer_content ul li:nth-of-type(4) {
            color: #415967;
        }

        .footer_content ul li:nth-of-type(5) span {
            color: #568193;
        }
         /*#block_hero{
            height:50px;
            width:50px;
            position:absolute;
            background:transparent;
            background-image: url(./public/h+/css/plugins/blueimp/img/loading.gif);
            border-radius: 50%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            top:0px;
            left:0px;
        }*/
        #body{
            height: 100%;
            width: 100%;
        }
        </style>
	</head>
	<body id="body">
     
    <div class="headerz">
        <div class="head_inner clearfix">
            <div class="logo"></div>
            <div class="main_nav_wrap">
                <ul class="clearfix" id="nav_ul">
                    <li>
                        <a href="">
                            游戏资料
                            <span>GAME INFO</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            商城/合作
                            <span>STORE</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            用户互动
                            <span>COMMUNITY</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            赛事中心
                            <span>EVENTS</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            自助系统
                            <span>SYSTEM</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sub_nav" id="sub_nav">
                <div class="sub_nav_inner">
                    <ul>
                        <li>新手指引</li>
                        <li>
                            <i class="hot"></i> 资料库
                        </li>
                        <li>攻略中心</li>
                        <li>模式实验室</li>
                        <li>海克斯战利品库</li>
                        <li>屏保下载</li>
                        <li>
                            <i class="new"></i>宇宙官网
                        </li>
                    </ul>
                    <ul>
                        <li>点券充值</li>
                        <li>道聚城</li>
                        <li>
                            <i class="hot"></i>周边商城
                        </li>
                        <li>LOL桌游</li>
                        <li>LOL信用卡</li>
                        <li>网吧特权</li>
                    </ul>
                    <ul>
                        <li>在线客服</li>
                        <li>视频中心</li>
                        <li>官方论坛</li>
                        <li>官方微信</li>
                        <li>官方微博</li>
                    </ul>
                    <ul>
                        <li>
                            <i class="new"></i>全球总决赛
                        </li>
                        <li>
                            <i class="hot"></i>LPL职业联赛
                        </li>
                        <li>德玛西亚杯</li>
                        <li>城市争霸赛</li>
                        <li>高校联赛</li>
                        <li>LDL发展联赛</li>
                        <li>高校自发赛</li>
                    </ul>
                    <ul>
                        <li>点亮图标</li>
                        <li>
                            <i class="hot"></i>封号查询
                        </li>
                        <li>体验服申请</li>
                        <li>回放系统</li>
                        <li>服务器状态查询</li>
                        <li>裁决之镰</li>
                        <li>
                            <i class="new"></i>峡谷之巅
                        </li>
                    </ul>
                </div>
            </div>
            <div class="head_right clearfix">
                <span class="head_search" id="search">
                    <i></i>
                </span>
                <div class="head_search_main" id="search_main">
                    <div class="head_search_inner">
                        <i class="search_inner_icon"></i>
                        <input type="text" class="input_search_box" placeholder="搜索 lol.qq.com">
                        <i class="close_inner_icon" id="inner_close"></i>
                    </div>
                    <div class="head_search_quick">
                        <h5>快速链接</h5>
                        <a href="">全球总决赛</a>
                        <a href="">新皮肤</a>
                        <a href="">RNG</a>
                        <a href="">季前赛</a>
                        <a href="">奥恩</a>
                    </div>
                </div>

                <span class="head_phone">
                    <i></i>
                </span>
                <div class="head_user_info" id="user_info" >
                    <div class="head_user_side">
                        <span></span>
                        <img src="http://ossweb-img.qq.com/images/lol/img/profileicon2/profileicon28.jpg" style="width: 66px;height: 66px;" alt="">
                    </div>
                    <div class="head_user_main">
                        <div class="head_user_unlogin">
                            <span>欢迎 {{$personal['Nname']}}
                                <!--<em>NO.1</em>-->
                            </span>
                        </div>
                        <div class="head_user_tips">
                            <span>弗雷尔卓德</span>
                        </div>
                    </div>
                </div>
                <!--<div class="head_user_drop" id="user_drop" style="display: none;">
                    <div class="head_user_drop_tips">
                        登录并且绑定大区后才可查看您的具体信息哦~（包括战绩、资产、声望值等）
                    </div>
                    <div class="head-link_personal">
                        进入个人中心
                    </div>
                </div>-->
            </div>
        </div>
        <div class="banner" id="banner">
            <div class="banner_connect">
                <div class="game_version">
                    当前游戏版本：
                    <em>Ver 7.24</em>
                    <span>版本详情</span>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="container" style="width: 1240px;">
    	 <div class="top">
            <i class="icon house"></i>
            <a href="#">英雄联盟首页</a>
            <i class="icon lg"></i>
            <a href="#">召唤师资料</a>
            <i class="icon lg"></i>
            <a href="#">个人信息</a>
        </div>
			<div class="row">
				<div class="header">
					<ul class="header_ul">
						<li class="header_ul_li">
							<img class="header_avater"src="http://ossweb-img.qq.com/images/lol/img/server/server9.jpg">
							<p class="header_title">弗雷尔卓德 网通</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="body">
					<div class="body_top clearbox">
						<div class="top_left">
							<div class="user_avater">
								<img width="100" height="100" alt="" src="http://ossweb-img.qq.com/images/lol/img/profileicon2/profileicon28.jpg">
							</div>
							<div class="user_msg">
								<h2 class="user_name">{{$personal['Nname']}}</h2>
								<p class="user_shengwang" class="pu-num" style="">声望值：<span id="jPersonRS">0</span><a href="http://lol.qq.com/rs/" class="commspr commico-why" title="消耗声望可在声望商城中兑换各种游戏道具、周边，参与各种有奖活动哦！可点击图标进入声望系统。" target="_blank"></a></p>
								<p id="jPersonBank" class="pu-num" style="">我的账户：<i class="commspr commico-R" title="点券"></i><em id="jPersonRP">0</em>&nbsp;&nbsp;<i class="commspr commico-L" title="金币"></i><em id="jPersonIP">13720</em><a href="{{$personal['photo']}}" class="commspr commbtn-smallred" target="_blank">充值点券&nbsp;&nbsp;&nbsp;</a></p>
							</div>
						</div>
						<div class="top_right">
							<img class="top_right_img" src="http://ossweb-img.qq.com/images/lol/img/rank/rank_none.jpg" alt="">
							<h6>单人/双人匹配赛</h6>
							<p >暂无排位赛段位信息</p>
						</div>
					</div>
					<div class="body_title">
						<div class="row">
							<div class="pagetab">
								<ul class="pagetab_list" id="pagetab_list">
									<li id="pagetab1" class="current card"><a href="javascript:void(0);" class="pagetab_list_lnk">个人信息</a></li>
									<li id="pagetab2" class="card"><a href="javascript:void(0);" class="pagetab_list_lnk">个人荣誉</a></li>
									<li id="pagetab3" class="card"><a href="javascript:void(0);" class="pagetab_list_lnk">历史战绩</a></li>
									<li id="pagetab4" class="card"><a href="javascript:void(0);" class="pagetab_list_lnk">我的英雄与皮肤</a></li>
									<li id="pagetab5" class="card"><a href="javascript:void(0);" class="pagetab_list_lnk">好友印象</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="body_footer">
						<div class="row">
							<div id="pagetab1_view" class="clearbox info-showbox text-center" style="display: block;">
								
									<h1 style="margin-top: 100px;">未查询到相关数据，请稍后再试。</h1>
								
							</div>
							<div id="pagetab2_view" class="clearbox info-showbox text-center" style="display: none;">
								
									<h1 style="margin-top: 100px;">系统未查询到您的排位赛奖励，确保您已经完成排位赛，且未被系统封号。</h1>
								
							</div>
							<div id="pagetab3_view" class="clearbox info-showbox text-center" style="display: none;">
								
									<h1 style="margin-top: 100px;">系统未查询到您的战绩信息，请稍后再试。</h1>
								
							</div>
							<div id="pagetab4_view" class="clearbox info-showbox text-center" style="display: none;">
								
									<h1 style="margin-top: 100px;">hero，waiting!</h1>
								
							</div>
							<div id="pagetab5_view" class="clearbox info-showbox text-center" style="display: none;">
								
									<h1 style="margin-top: 100px;">暂无好友给您填写印象。</h1>
								
							</div>
						</div>
					</div>                                                                                                                                                                                                                         
				</div>
			</div>
			
		</div>
    <!--底部-->
    <div class="footer">
        <div class="footer_content clearfix">
            <ul>
                <li>腾讯互动娱乐 | 服务条款 | 广告服务 | 腾讯游戏招聘 | 腾讯游戏客服 | 游戏活动 | 游戏地图 | 商务合作 | 腾讯网 | 网站导航</li>
                <li>腾讯公司版权所有</li>
                <li>COPYRIGHT © 1998 - 2017 TENCENT. ALL RIGHTS RESERVED.</li>
                <li>© 2012 Riot Games, Inc. ALL RIGHTS RESERVED.</li>
                <li>文网进字[2011] 004号 & ISBN 978-7-89989-145-2
                    <span>| 新出网证（粤）字010号 | 粤网文【2017】6138-1456号</span>
                </li>
            </ul>
        </div>
    </div>
     
     
     
     
     
     
    <div id="block_hero">

    </div>

		
		<script src="./public/main/js/main.js"></script>
		<script src="./public/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="./public/main/js/personal.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script>
        
        document.onmousemove=function(even)
        {
            var oDiv=document.getElementById('block_hero');
//            document.body  Chrome专用
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

                var oEvent=even||event;
                oDiv.style.top = scrollTop+oEvent.clientY+10+"px";
                oDiv.style.left=scrollLeft+oEvent.clientX+10+"px";
        }
</script>
</html>